import {defineComponent, reactive} from "vue";
import "./css/index.css"
import {storeToRefs} from "pinia";
import {formatDateTime, getAssetsImages} from "@/utils/utils";
import {CategoriesStore} from "@/stores/categories";
import {useRouter} from "vue-router";

export default defineComponent({
    setup(){
        const categories_store = CategoriesStore()
        const {categoriesList}  = storeToRefs(categories_store)
        const router = useRouter()
        categories_store.getCategoriesList({
            pageSize :8,
            is_vip:true
        })
        const handleMore = () => {
            router.push({
                path:'/category/index'
            })
        }

        const handleDetails = async (id) => {
            // 将该资讯的浏览量+1
            const code = await categories_store.updateInformationRecord(id, 'view')
            if (code === 0) {
                // 跳转值详情页面
                router.push({name: 'categoryDetails', query: {id}})
            }
        }
        return ()=>{
            console.log(categoriesList.value,"categoriesList")
            const listCards = categoriesList.value.map(item => {
                return <>
                        <el-card body-style={ {
                            padding: '0px',
                        }}
                             onClick={()=>{handleDetails(item.id)}}
                             style = {{
                                 width : '100%',
                                 marginBottom:'20px',
                             }}>
                        <div className="image">
                            <el-image style={{
                                width:'130px',
                                height:'130px',
                                borderRadius:'10px'
                            }} src={item.imgUrl} fit={'cover'} />
                        </div>
                        <div className="text">
                            <p>项目名称:{item.title}</p>
                            <p>项目类别:{item.type_info.type_name}</p>
                            <p>期望金额:{item.expected_amount}元</p>
                            <p>众筹金额:{item.amount_raised}元</p>
                        </div>
                    </el-card>
                </>
            })
            return <>
                <div className="categories-box">
                    <div className="categories-title">众筹项目推荐</div>
                    <div className="categories-cont">
                        {listCards}
                    </div>
                </div>
                <div className="categories-more" onClick={handleMore}>查看更多</div>
            </>
        }
    }
})